<template>
    <div style="height: 100%"><!--讲师风采-->
        <navbar :title="$t('find_instructor_style')"></navbar>
        <div class="content-noBottom">
            <div class="view-body">
                <!--筛选-->
                <div class="header-select">
                    <van-dropdown-menu active-color="#075ebb">
                        <van-dropdown-item v-model="selectLevel" :title="dropTitle" :options="getlevels" @change="selectedLevel()"/>
                    </van-dropdown-menu>
                </div>
                <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
                    <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                        <van-list
                            v-model="isLoading"
                            :finished="finished"
                            :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                            loding-text="loading"
                            @load="getFreshData"
                            style="padding-bottom: 56px;"
                            >
                            <div v-bind:class="{'height100' : total === 0}">
                                <ul class="module-list-07" v-if="total > 0">
                                    <li @click="instorJump(instructor.itiEntId,instructor.itiImg)" class="clearfix" v-for="instructor in freshInstList" :key="instructor.itiEntId">
                                        <span class="user-box">
                                            <van-image :src="appUrl + instructor.itiImg" lazy-load></van-image>
                                        </span>
                                        <div style="float: left;width:100%;">
                                            <div class="clearfix"><span class="word-title-02 word-clamp-1">{{ instructor.itiName }}</span><span class="recommend-box" v-if="instructor.itiRecommend === 1">{{ $t("instructor_recommend") }}</span></div><!--推荐-->
                                            <p class="color666 word-clamp-2 margin-top5"> {{starLevelType[instructor.itiLevel]}} </p><!--星级讲师-->
                                            <p class="color666 word-clamp-2 margin-top5">{{ $t("instructor_expertise_areas") }}：{{ instructor.itiExpertiseAreas }}</p><!--主讲课程  先将主讲课程改为返回的擅长区域-->
                                        </div>
                                    </li>
                                </ul>
                                <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                                <!--暂无数据-->
                                <div v-if="!isLoading && total === 0" style="height:100%;">
                                    <div class="box-table" style="width:100%;height:100%;">
                                        <div class="box-table-cell" style="text-align: center;">
                                            <div class="no-data">
                                                <img src="../../../static/images/no-data.png" alt=""/>
                                                <p class="color999">{{ $t('no_data') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
export default {
    name: 'InstructorList',
    mixins: [mixin],
    data() {
        return {
            pageNo: 1, //分页页码
            total: 0, //总数
            selectLevel: '', //默认分页类型
            selectType: null,
            selectSource: null,
            instructorList: [],
            level: { //级别
                J: this.$t('instructor_level_J'), //'初级'
                M: this.$t('instructor_level_M'), //'中级'
                S: this.$t('instructor_level_S'), //'高级'
                D: this.$t('instructor_level_D') //'特聘'
            },
            typeOf: { //类型
                P: this.$t('instructor_type_part_time'), //'兼职'
                F: this.$t('instructor_type_duty') //'专职'
            },
            source: { //来源
                IN: this.$t('instructor_source_internal'), //'内部讲师'
                EXT: this.$t('instructor_source_External') //'外部讲师'
            },
            id: '',
            isShow1: false,
            isShow2: false,
            isShow3: false,
            getlevels: [
                {value: '', text: this.$t('type_all_title')}, //全部
                {value: 'J', text: this.$t('instructor_level_J')}, //'初级'
                {value: 'M', text: this.$t('instructor_level_M')}, //'中级'
                {value: 'S', text: this.$t('instructor_level_S')}, //'高级'
                {value: 'D', text: this.$t('instructor_level_D')} //'特聘'
            ],
            gettypes: [
                {type: 'All', value: this.$t('type_all_title')}, //全部
                {type: 'P', value: this.$t('instructor_type_part_time')}, //兼职
                {type: 'F', value: this.$t('instructor_type_duty')} //专职
            ],
            getsources: [
                {type: 'All', value: this.$t('type_all_title')}, //全部
                {type: 'IN', value: this.$t('instructor_source_internal')}, //内部讲师
                {type: 'EXT', value: this.$t('instructor_source_External')} //外部讲师
            ],
            isLoading: true,
            /*---------------------------------------------------------------*/
            freshInstList: [], // 新的导师列表
            pageSize: 10, //分页参数
            type: '', //导师类型
            finished: false,
            isRefresh: false,
            dropTitle: this.$t('instructor_level')
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshData('refresh');
                this.isRefresh = false;
            }, 900);
        },
        // hideViewBox(num) {
        //     this['isShow' + num] = false;
        // },
        selectedClick1() {
            this.isShow1 = true;
            this.isShow2 = false;
            this.isShow3 = false;
        },
        /*@不虎新接口 返回讲师列表*/
        getFreshData(option) {
            let paramsTemp = {
                itiLevel: this.type,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/instr/list/page`,
                params: paramsTemp
            }).then(res => {
                if (res.status === 200) {
                    if (option === 'refresh') {
                        this.freshInstList = res.data.results;
                    } else {
                        this.freshInstList = [...this.freshInstList, ...res.data.results];
                    }
                    this.total = res.data.totalRecord;
                    this.isLoading = false;
                    this.pageNo++;
                    if (this.freshInstList.length >= this.total) {
                        this.finished = true;
                    }
                }
            });
        },

        instorJump(id, imag) { //跳转到详情页
            this.$router.push({path: '/instructorDetail', query: {id, imag}});
        },
        selectedLevel() { //级别选择
            this.isLoading = true;
            this.pageNo = 1;
            this.total = 0;
            this.freshInstList = [];
            this.type = this.selectLevel;
            this.dropTitle = this.level[this.selectLevel];
            this.getFreshData('refresh');
            this.isShow1 = false;
        }
    },
    mounted() {
        //  this.getDataList();
        this.getFreshData();
    }
};
</script>

<style scoped lang="less">
    .word-title-02 {
        float: left;
        max-width: calc(100% - 45px);
    }
    .user-box .img {
      width: 56px;
      height: 56px;
      border-radius: 50%;
  }
</style>
